<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大作业_留言板</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    body {
        width: 100%;
        height: 100%;
        background: rgb(65, 65, 63);
    }

    .bacground {
        width: 700px;
        height: 100%;
        background: white;
        margin: auto;
        margin-top: 20px;
    }

    .head,
    .pop-head {
        height: 50px;
        font-size: 20px;
        text-align: center;
        line-height: 50px;
    }

    .name {
        width: 640px;
        height: 40px;
        font-size: 20px;
        margin: 10px 28px;
        line-height: 50px;
        border-radius: 8px;
        border: 2px solid rgb(139, 137, 137);
        outline: none;
    }

    .content,
    .pop-reply {
        width: 640px;
        height: 150px;
        font-size: 22px;
        margin: 10px 28px;
        border: 2px solid rgb(139, 137, 137);
        outline: none;
        border-radius: 8px;
        resize: none;
    }

    .btn,
    .pop-btn {
        float: right;
        height: 30px;
        margin-right: 28px;
        border-radius: 6px;
        outline: none;
        font-size: 20px;
        padding: 0 20px;
        background: rgb(169, 238, 255);
    }

    h3 {
        font-size: 20px;
        color: rgb(102, 102, 102);
        background: rgb(205, 221, 248);
        margin-top: 50px;
        line-height: 50px;
        text-indent: 30px;
        font-weight: 545;
    }

    li {
        list-style: none;
        width: 640px;
        font-size: 22px;
        margin: 15px 30px;
    }

    .message-head {
        display: flex;
    }

    .message-head .photo {
        width: 70px;
        height: 70px;
        background: rgb(6, 109, 134);
        display: inline-block;
        border-radius: 50%;
        text-align: center;
        line-height: 70px;
        overflow: hidden;
    }

    .message-head .time {
        margin-left: 12px;
    }

    .liuyan,
    .reply p {
        width: 560px;
        /* height: 76px; */
        line-height: 50px;
        display: block;
        background: rgb(205, 221, 248);
        font-size: 20px;
        margin-left: 80px;
        border-radius: 8px;
        text-indent: 15px;
    }

    .delete {
        width: 60px;
        height: 30px;
        display: block;
        line-height: 30px;
        margin-left: 580px;
        /* margin-bottom: 0px; */
        border-radius: 6px;
        outline: none;
        font-size: 15px;
        background: rgb(169, 238, 255);
    }

    .answer {
        width: 60px;
        height: 30px;
        display: block;
        line-height: 30px;
        margin-top: -29px;
        margin-left: 515px;
        border-radius: 6px;
        outline: none;
        font-size: 15px;
        background: rgb(169, 238, 255);
    }

    .popup {
        width: 100vw;
        height: 100vh;
        position: fixed;
        background: rgba(0, 0, 0, .3);
        left: 0;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
    }

    .pop-content {
        width: 700px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        padding-bottom: 20px;
    }

    .reply p {
        margin-top: 10px;
        background: rgba(100, 100, 100, .1);
    }
</style>

<body>
    <div class="bacground">
        <div class="head">留言板</div>
        <input class="name" type="text" placeholder="请输入您的昵称">
        <textarea class="content" placeholder="请保持言论文明......"></textarea>
        <button class="btn">留言</button>
        <h3>大家在说</h3>
        <ul class="text">
            <!-- <li>
        <div class="message-head">
          <span class="photo">系统</span>
          <p class="time">2019-9-27 0:47:38</p>
        </div>
        <p class="liuyan">测试留言</p>
        <div class="reply">
          <p>测试回复</p>
        </div>
        <button class="delete">Delete</button>
        <button class="answer">Answer</button>
      </li> -->
        </ul>
    </div>
    <div class="popup">
        <div class="pop-content">
            <div class="pop-head">回复板</div>
            <textarea class="pop-reply" placeholder="请保持言论文明......"></textarea>
            <button class="pop-btn re">回复</button>
            <button class="pop-btn de">取消</button>
        </div>
    </div>
</body>
<script>

    var nameinp = document.querySelector(".name");
    var content = document.querySelector(".content");
    var list = document.querySelector(".text");
    var btn = document.querySelector(".btn");
    // 以下为anwser的弹出框获取

    // 弹出框
    var replaywindow = document.querySelector(".popup");
    // 弹出框内容
    var replytext = document.querySelector(".pop-reply")
    // 弹出框的回复按钮
    var re = document.querySelector(".re");
    // 弹出框取消按钮
    var de = document.querySelector(".de");

    var t;
    var count = 11;

    btn.onclick = function () {

        // 定时器 
        btn.disabled = true;
        t = setInterval(function () {
            count--;
            btn.innerHTML = `${count}秒后才能再次留言`;
            if (count < 0) {
                // 让count=11；使定时器可以再次执行
                count = 11;
                clearInterval(t);
                btn.innerHTML = `留言`;
                btn.disabled = false;
            }
        }, 1000)


        if (nameinp.value === "" || content.value === "") {
            // 若输入为空，取消定时器的限制
            count = 0;
            btn.disabled = false;
            btn.innerHTML = `留言`;
            alert("昵称或者留言内容不能为空");

        } else {
            var li = document.createElement("li")
            li.innerHTML = `
            <div class="message-head">
            <span class="photo">${nameinp.value}</span>
            <p class="time">${formatDate()}</p>
            </div>
            <p class="liuyan">${content.value}</p>
            <div class="reply">
       
            </div>
           <button class="delete">Delete</button>
            <button class="answer">Answer</button>
            `
            // 删除回复的内容
            li.querySelector(".delete").onclick = function () {
                li.querySelector(".delete").parentElement.remove();
            }

            // 新增回复
            li.querySelector(".answer").onclick = function () {

                // 点击anwser时，弹出框
                replaywindow.style.display = "flex";
                // replaywindow.style.display = "block";

                // 点击弹出框里的取消按钮时，弹出框消失
                de.onclick = function () {
                    replaywindow.style.display = "none";
                }

                re.onclick = function () {
                    if (replytext.value) {
                        // console.log(replytext.value);
                        // 创建p，内容为框里输入的内容
                        var p = document.createElement("p");
                        p.innerHTML = replytext.value;
                        // 点击弹出框里的确定按钮时，弹出框消失
                        replaywindow.style.display = "none";
                        // 获取回复的父元素
                        var replydiv = li.querySelector(".reply")
                        // console.log(replydiv);
                        // console.log(replydiv.children.length);

                        // replydiv 为父元素，最开始其是没有子元素,当存在第一个子元素时，就在最前面添加元素
                        // 找replydiv的子元素

                        // replydiv.children 为伪数组，其长度为0则证明其无子元素
                        if (replydiv.children.length == 0) {
                            replydiv.appendChild(p)
                            // console.log(replydiv.appendChild(p));
                        } else {
                            // replydiv.children[0] 表示replydiv的第一个子元素
                            replydiv.insertBefore(p, replydiv.children[0])
                            // replydiv.innerHTML += `<p>${replytext.value}</p>`
                            // console.log(22);
                        }
                    }
                }
            }

            // 将创建的li全部推到页面上的ul上
            // 若list没有子元素，则list.children.length为0，就添加li到list
            if (list.children.length == 0) {
                list.appendChild(li);
            } else {
                // list中存在子元素后，在list.children[0]的前面插入新加的li
                list.insertBefore(li, list.children[0]);
            }
        }
    }

    // 格式化时间函数
    function formatDate() {
        var res = "";
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var week = date.getDay();
        var hours = date.getHours();
        hours = addzero(hours);
        var mins = date.getMinutes();
        mins = addzero(mins);
        var secs = date.getSeconds();
        secs = addzero(secs);
        var arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        res += `${year}-${month}-${day} ${arr[week]} ${hours}:${mins}:${secs}`;
        console.log(res);
        return res;
    }


    // 补0 函数
    function addzero(x) {
        return x > 9 ? x : "0" + x;
    }






</script>

</html>